<template>
  <!--登录页-->
  <div class="page-account">
    <div class="page-account-container">
      <div class="page-account-top">
        <div class="page-account-top-logo">
          <img src="/src/assets/img/logo.png" alt="logo">
        </div>
        <div class="page-account-top-desc">
          Tp6+Vue3 通用后台管理系统模板
        </div>
      </div>
      <LoginForm/>
      <div class="page-account-other">
        <span>其他登录方式</span>
        <img src="/src/assets/img/login/icon-social-wechat.svg" alt="wechat">
        <a @click="QQLogin()">
          <img src="/src/assets/img/login/icon-social-qq.svg" alt="qq">
        </a>
        <img src="/src/assets/img/login/icon-social-weibo.svg" alt="weibo">
      </div>
      <div class="page-footer">
        <a @click="jumpICP">
          {{ state.icp.key }}
        </a>
        <div style="width:300px;margin:0 auto; padding:20px 0;">
          <img :src="config.backImgSrc+state.gaba.img_path">
          <a @click="jumpGaBA"
             style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
              {{ state.gaba.key }}
            </p>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import config from '@/config/global.config';
import LoginForm from "@/components/login-form";
import {CommonServices} from "@/api/common";
import {getStore, setStore} from "@/api/utils";
import {onMounted, reactive} from "vue";

const state = reactive({
  icp: {key: '', value: ''},
  gaba: {key: '', value: '', img_path: ''}
})

onMounted(() => {
  getIndexData();
})

// 获取首页数据
const getIndexData = async () => {
  const {data} = await CommonServices.getIndexData();
  console.log(data)
  setStore('qq_app_id', data.qq_app_id.value)
  Object.assign(state.icp, JSON.parse(data.icp.value))
  Object.assign(state.gaba, JSON.parse(data.gaba.value))
}

// 跳转ICP
const jumpICP = () => {
  if (state.icp.value) {
    window.location.href = state.icp.value
  } else {
    return false
  }
}

// 跳转公安备案
const jumpGaBA = () => {
  if (state.gaba.value) {
    window.location.href = state.gaba.value
  } else {
    return false
  }
}

// QQ登录--自定义
const QQLogin = () => {
  let appId = getStore('qq_app_id');
  // let redirectURL = encodeURI((new URL(window.location)).href);
  let redirectURL = encodeURIComponent("https://www.zpstudy.work/#/QQRedirect")
  let url = `https://graph.qq.com/oauth2.0/authorize?client_id=${appId}&response_type=token&redirect_uri=${redirectURL}`
  console.log(url)
  return window.location.href = url;
  // return window.open(url, 'oauth2Login_qq', 'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes')
}

// QQ登录--回调函数
const QQLoginCallBack = () => {
  let redirectURL = new URL(window.location)
}

</script>

<style scoped lang="less">
@import "./login.less";
</style>
